<template>
	<view>
		<scroll-view class="scroll-view" scroll-y="true" :style="'height:'+scriptHeight+'px'">
			<view class="item">
				<view class="title">朝代</view>
				<view class="label">
					
					<view class="label-text" v-for="(item,index) in showDynastyList" @click="clickDynasty(item.id)" :key="index">{{item.name}}</view>
					
				</view>
				<view class="more" v-if="showDynastyMoreView == true" @click="clickDynastyMore"><view class="more-title">查看更多</view><uni-icons type="arrowdown" size="15"></uni-icons></view>
				<view class="more" v-if="showDynastyLessView == true" @click="clickDynastyLess"><view class="more-title">收起</view><uni-icons type="arrowup" size="15"></uni-icons></view>
			</view>
			<view class="item">
				<view class="title">诗人</view>
				<view class="label">
					
					<view class="label-text" v-for="(item,index) in showPostList" @click="clickPoet(item.id)"  :key="index">{{item.name}}</view>
					
				</view>
				<!-- <view v-if="showPostList.length > 9"> -->
				<view class="more" v-if="showPostMoreView == true" @click="clickPoetMore"><view class="more-title" >查看更多</view><uni-icons type="arrowdown" size="15"></uni-icons></view>
				<view class="more" v-if="showPostMoreView == false"  @click="clickPoetLess"><view class="more-title">收起</view><uni-icons type="arrowup" size="15"></uni-icons></view>
				<!-- </view> -->
				
			</view>
			<view class="item">
				<view class="title">标签</view>
				<view class="label">
					
					<view class="label-text" v-for="(item,index) in showLabelList" @click="clickLable(item.id)"  :key="index">{{item.name}}</view>
					
				</view>
				<view class="more" v-if="showLabelMoreView == true" @click="clickLabelMore"><view class="more-title">查看更多</view><uni-icons type="arrowdown" size="15"></uni-icons></view>
				<view class="more" v-if="showLabelLessView == true" @click="clickLabelLess"><view class="more-title">收起</view><uni-icons type="arrowup" size="15"></uni-icons></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				'scriptHeight':400,
				'showDynastyList':[],
				'dynastyList':[],
				'showDynastyMoreView':false,
				'showDynastyLessView':false,
				'showLabelList':[],
				'labelList':[],
				'showLabelMoreView':false,
				'showLabelLessView':false,
				'showPostList':[],
				'showPostMoreView':false,
				"poetList":[]
				
			}
		},
		onReady() {
			this.scriptHeight = uni.getSystemInfoSync().windowHeight;
		},
		onLoad() {
			this.initData();
			// this.defaultPoetShow();
			// this.defaultSynastyShow();
			// this.defaultLabelShow();
		},
		methods: {
			initData:function(){
				uni.showLoading({title: '加载中',mask:true});
				let that = this;
				uni.request({
					url: that.websiteUrl+'/shici_index',
					method:'GET',
					header: {
					        'x-requested-with': 'xmlhttprequest' //自定义请求头信息
					    },
					data:{
						// 'openid':that.openid,
					},
					success:(res)=>{
						if(res.data.code != 1){
							uni.showToast({
								title:res.data.msg,
								duration:2000,
								icon:'none',
							})
						} else {
							let tmpData = res.data.data;
							// console.log(res.data.data);
							// console.log(tmpData.label);
							that.labelList = tmpData.label;
							that.dynastyList = tmpData.dynasty;
							that.poetList = tmpData.poet;
							that.defaultPoetShow();
							that.defaultSynastyShow();
							that.defaultLabelShow();
						}
					},
					complete: (res) => {
						setTimeout(function () {uni.hideLoading();}, 100);
					}
				})
			
			},
			//点击诗人事件
			clickPoet:function(id){
				uni.navigateTo({
					url:"list?poet_id="+id,
				})
				// console.log(id);
			},
			//诗人点击更多
			clickPoetMore:function(){
				this.showPostList = this.poetList;
				this.showPostMoreView = false;
			},
			//诗人收起更多
			clickPoetLess:function(){
				this.defaultPoetShow();
			},
			//默认诗人显示
			defaultPoetShow:function(){
				if(this.poetList.length > 10){
					this.showPostList = this.poetList.slice(0,10);
					this.showPostMoreView = true;
				} else {
					this.showPostList = this.poetList;
				}
				
				console.log(this.showPostList.length);
				
			},
			//点击朝代事件
			clickDynasty:function(id){
				uni.navigateTo({
					url:"list?dynasty_id="+id,
				})
				// console.log(id);
			},
			clickDynastyMore:function(){
				this.showDynastyList = this.dynastyList;
				this.showDynastyMoreView = false;
				this.showDynastyLessView = true;
			},
			clickDynastyLess:function(){
				this.showDynastyMoreView = true;
				this.showDynastyLessView = false;
				this.defaultSynastyShow();
			},
			defaultSynastyShow:function(){
				if(this.dynastyList.length > 10){
					this.showDynastyList = this.dynastyList.slice(0,10);
					this.showLabelMoreView = true;
				} else {
					this.showDynastyList = this.dynastyList;
				}
			},
			//标签
			clickLable:function(id){
				// console.log(id);
				uni.navigateTo({
					url:"list?label_id="+id,
				})
			},
			clickLabelMore:function(){
				this.showLabelList = this.labelList;
				this.showLabelMoreView = false;
				this.showLabelLessView = true;
			},
			clickLabelLess:function(){
				this.showLabelMoreView = true;
				this.showLabelLessView = false;
				this.defaultLabelShow();
			},
			defaultLabelShow:function(){
				if(this.labelList.length > 10){
					this.showLabelList = this.labelList.slice(0,10);
					this.showLabelMoreView = true;
				} else {
					this.showLabelList = this.labelList;
				}
			},
		}
	}
</script>

<style lang="scss">
.scroll-view{
	height: 450px;
	background-color: $uni-scroll-bg-clolr;
	.item{
		background-color: $uni-bg-color;
		margin: 10px;
		padding-bottom: 10px;
		border-radius: 5px;
		.title{
			font-size: 16px;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			height:50px;
			// background-color: #007AFF;
			color: $uni-color-title;
		}
		.label{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: row;
			flex-wrap:wrap;
			.label-text{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 13px;
				// border: 1px $uni-border-color solid;
				background-color: $uni-primary-color;
				padding: 5px 8px;
				border-radius: 10px;
				// margin-left: 10px;
				color:$uni-bg-color;
				margin:10px;
			}
		}
		.more{
			font-size: 13px;
			display: flex;
			justify-content: center;
			margin: 10px 0;
			color:$uni-text-color;
			.more-title{
				margin-right: 3px;
			}
		}
		
	}
}
</style>
